<template>
    <div class="liveDetail">
        <span class="title">{{ title }}：{{ value }}%</span>
        <div class="progressBar" :id="progressBarId"></div>
    </div>
</template>

<script setup>
import {
    defineProps, onMounted,
    ref
} from 'vue';

const props = defineProps({
    value: {
        default: 0,
        type: Number,
    },
    title: {
        default: '',
        type: String,
    },
    keyId: {
        default: '',
        type: Number,
    }
});
const progressBarId = ref(`progressBar${props.keyId}`);
onMounted(() => {
    if (document.getElementById(`progressBar${props.keyId}`)) {
        const progressBar = document.getElementById(`progressBar${props.keyId}`);
        progressBar.style.width = `${props.value}%`;
    }
})
</script>
<style scoped lang="scss">
.liveDetail {
    /* padding-top: 10px; */
    /* height: 100%; */
    width: 100%;
}

.title {
    color: white;
    font-size: 14px;
}

.progressBar {
    margin-top: 3px;
    height: 20px;
    background-color: #14918b;
    width: 0%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}
</style>